<template>
  <div class="app-container" :element-loading-text="loadingText">
    <el-form ref="queryFormRef" label-width="88px">
      <el-form-item label="挂号单ID" prop="regId">
        <el-input v-model="queryParams.regId" clearable placeholder="请输入挂号单号" size="small" style="width:300px" />
        <el-button type="primary" icon="search" size="small" @click="handleQuery()">读取IC卡</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div v-if="pageData?.regId">
    <!-- 病例信息开始 -->
    <el-card style="margin-bottom: 5px">
      <el-form :data="pageData" :model="pageData" label-position="right" label-width="120px" inline
        class="demo-table-expand">
        <el-form-item label="挂号单号:">
          <span style="color: red;" v-text="pageData?.regId" />
        </el-form-item>
        <el-form-item label="医生姓名:">
          <span style="color: red;" v-text="pageData?.userName" />
        </el-form-item>
        <el-form-item label="科室名称:">
          <span style="color: red;" v-text="pageData?.deptName" />
        </el-form-item>
        <el-form-item label=" 患者姓名:">
          <span style="color: red;" v-text="pageData?.patientName" />
        </el-form-item>
        <el-form-item label="就诊时间:">
          <span style="color: red;" v-text="pageData?.careDate" />
        </el-form-item>
        <el-form-item label="主诉:">
          <span style="color: red;" v-text="pageData?.caseTitle" />
        </el-form-item>
        <el-form-item label="诊断信息:">
          <span style="color: red;" v-text="pageData?.caseResult" />
        </el-form-item>
        <el-form-item label="医生建议:">
          <span style="color: red;" v-text="pageData?.doctorTips" />
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 病例信息结束 -->
    <!-- 工具按钮开始 -->
    <el-card style="margin-bottom: 5px">
      <el-button type="success" icon="finished" @click="selectAll">全选</el-button>
      <el-button style="background-color: gray;" @click="deselectAll" type="success" icon="finished">取消全选</el-button>
      <el-button type="danger" icon="money" @click="cashPayment">现金支付</el-button>
      <span style="margin-left: 20px">订单总额: <span style="color: red;">￥{{ allMount }}</span></span>
    </el-card>
    <!-- 未支付的处方信息开始 -->
    <el-card style="margin-bottom: 5px">
      <el-collapse>
        <el-collapse-item v-for="(item, index) in pageDataList" :key="index" :name="index">
          <template v-slot:title>
            【<span style="color: red;">{{ item.coType === '0' ? '药用处方' : '检查处方' }}</span>】【{{ index + 1 }}】【处方总额】:<span
              style="color: red;">￥{{ item.careOrderItems == 0 ? 0 : item.allAmount }}</span>
          </template>
          <el-table ref="tableRef" :data="item.careOrderItems.filter((item: { status: string; }) => item.status == '0')"
            :cell-style="{ 'text-align': 'center' }" @selection-change="selectionChange($event, item.coId)">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="序号" align="center" type="index" width="60" />
            <el-table-column v-if="item.coType === '0'" label="药品名称" align="center" prop="itemName" />
            <el-table-column v-if="item.coType === '1'" label="项目名称" align="center" prop="itemName" />
            <el-table-column label="数量" align="center" prop="num" />
            <el-table-column label="单价(元)" align="center" prop="price" />
            <el-table-column label="总价(元)" align="center" prop="amount" />
            <el-table-column label="备注" align="center" prop="remark" />
            <el-table-column label="状态" align="center" prop="status">
              <template v-slot:default="{ row }">
                <el-tag v-if="row.status === '0'" type="warning">未支付</el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-collapse-item>
      </el-collapse>
    </el-card>
  </div>
  <div v-else style="text-align:center;color: red;">请输入正确的挂号单ID查询</div>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { ElTable } from 'element-plus';
import CareHisAPI, { CareList, CareHisQuery } from '@/api/care';
import CareOrderApI, { CareOrderQuery, CareOrderPageVO } from '@/api/careOrder';
let tableRef = ref([])

const selectTable = ref<CareOrderPageVO[]>([]) // 选择的数据
// 选中项
const selectionChange = (selection: any, coId: string) => {
  // 判断收集的选中数据是否有数据
  if (!selectTable.value.length) { // 没有数据就直接赋值
    selectTable.value = selection
  } else { // 有数据,根据coId遍历判断收集的数据中是否有,有就删除掉重新添加,没有就直接赋值
    selectTable.value = selectTable.value.filter(item => item.coId !== coId)
    selection.forEach(item => {
      selectTable.value.push(item)
    })
  }
}

// 订单总额
const allMount = computed(() => { // 计算属性
  // console.log();
  return selectTable.value.reduce((money, item) => money + item.amount, 0)
})
function selectAll() {
  tableRef.value.forEach((item: any) => {
    item.clearSelection();
    item.toggleAllSelection();
  })
}

function deselectAll(this: any) {
  tableRef.value.forEach((item: any) => {
    item.clearSelection();
  });
}

//获取用户列表
const pageData = ref<CareList>();
const pageDataList = ref<CareOrderPageVO[]>([]);
//查询条件
const queryParams = reactive<CareHisQuery>({
  regId: '',
  pageNum: 1,
  pageSize: 10
});


const queryOrderParams = reactive<CareOrderQuery>({
  chId: '',
  itemType: 0,
  pageNum: 1,
  pageSize: 10
});


/** 查询方法 */
async function handleQuery() {
  loading.value = true;
  pageData.value = await CareHisAPI.getPage(queryParams);
  if (pageData.value?.regId) {
    if (pageData.value.chId != null) {
      filteredPageDataList(pageData.value.chId);
    }
  } else {
    ElMessage.error('请输入正确的挂号单ID查询');
  }
}
/** 查询方法 */
function filteredPageDataList(chId: string) {
  console.log('chId', chId);
  queryOrderParams.chId = chId;
  CareOrderApI.getPage(queryOrderParams)
    .then((data) => {
      console.log(data);
      pageDataList.value = data;
      console.log(pageDataList.value);
    })
}



// 现金支付
const cashPayment = () => {
  if (!selectTable.value.length) {
    ElNotification.warning({
      title: '警告',
      message: '请选择要支付的项目',
      offset: 70
    })
    return
  }
  // 发请求
  ElMessageBox.confirm('是否确定创建订单并使用现金支付?', '温馨提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {

    console.log(pageDataList.value);
    // console.log(selectTable.value);
    console.log(data());

    CareOrderApI.xianjina(data()).then((res: any) => {
      console.log(res);
      if (res !== null) {
        ElNotification.success({
          title: '成功',
          message: "订单创建并现金支付成功",
          offset: 70

        })
        location.reload();
      }
    })

  }).catch(() => {
    ElNotification.info({
      title: '取消',
      message: "创建已取消",
      offset: 70
    })
  })
}
const loading = ref(false);
// 收集数据
const data = () => {
  let orderChargeForm = {
    orderCharge: {
      orderAmount: allMount.value,
      chId: pageData.value?.chId,
      regId: pageData.value?.regId,
      patientId: pageData.value?.patientId,
      patientName: pageData.value?.patientName,
      createTime: pageData.value?.careDate,
      updateBy: queryParams.regId,
      createBy: allMount.value,
    },
    orderChargeItems: <any>[],
  };
  orderChargeForm.orderChargeItems = selectTable.value;
  return orderChargeForm;
};

</script>
<style scoped>
.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
